<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-calendar"></i> 广告列表 </el-breadcrumb-item>
                <el-breadcrumb-item>广告详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <el-form ref="form" :model="form" label-width="98px">
                    <el-form-item label="广告图">
                        <el-upload
                            class="avatar-uploader"
                            :action="$myUrl.BASEURL + 'system/resourceFileUpload'"
                            :show-file-list="false"
                            :on-success="adImgSuccess"
                            :data="adImgMark"
                            :before-upload="ImgUpload"
                        >
                            <img v-if="form.adImg" :src="adImgSrc" class="avatar" />
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="广告二维码">
                        <el-upload
                            class="avatar-uploader"
                            :action="$myUrl.BASEURL + 'system/resourceFileUpload'"
                            :show-file-list="false"
                            :on-success="qrImgSuccess"
                            :data="qrImgMark"
                            :before-upload="ImgUpload"
                        >
                            <img v-if="form.qrImg" :src="qrImgSrc" class="avatar" />
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="广告启用状态">
                        <el-radio v-model="form.isEnable" label="0">启用</el-radio>
                        <el-radio v-model="form.isEnable" label="1">不启用</el-radio>
                    </el-form-item>
                    <el-form-item label="广告时间">
                        <el-col :span="11">
                            <el-date-picker
                                type="date"
                                placeholder="选择开始日期"
                                v-model="form.date1"
                                value-format="yyyy-MM-dd"
                                style="width: 100%"
                            ></el-date-picker>
                        </el-col>
                        <el-col class="line" :span="2">-</el-col>
                        <el-col :span="11">
                            <el-date-picker
                                type="date"
                                placeholder="选择结束日期"
                                v-model="form.date2"
                                value-format="yyyy-MM-dd"
                                style="width: 100%"
                            ></el-date-picker>
                        </el-col>
                    </el-form-item>
                    <!-- <el-form-item label="展示时段">
                        <el-checkbox-group v-model="form.type">
                            <el-checkbox label="6点-9点" name="type"></el-checkbox>
                            <el-checkbox label="9点-12点" name="type"></el-checkbox>
                            <el-checkbox label="12点-15点" name="type"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item> -->
                    <el-form-item label="广告资源类型">
                        <el-radio key="0" label="0" v-model="form.advertType">软文</el-radio>
                        <el-radio key="1" label="1" v-model="form.advertType">主题展</el-radio>
                        <el-radio key="2" label="2" v-model="form.advertType">公司</el-radio>
                        <el-radio key="3" label="3" v-model="form.advertType">产品</el-radio>
                        <el-radio key="4" label="4" v-model="form.advertType">图片</el-radio>
                        <el-radio key="5" label="5" v-model="form.advertType">视频</el-radio>
                        <el-radio key="6" label="6" v-model="form.advertType">产品链接</el-radio>
                    </el-form-item>

                    <el-form-item label="选择软文" v-if="form.advertType == 0" >
                       <div style="border: 1px solid #ccc; padding: 10px">
                            <el-row>
                            <el-col :span="17"> <el-input v-model="ruanwenName" placeholder="输入软文名搜索"></el-input></el-col>
                            <el-col :span="1">&nbsp;</el-col>
                            <el-col :span="6">
                                <el-button type="primary" @click="ruanwenSearch">搜索</el-button>
                            </el-col>
                        </el-row>
                        <br />

                       <div style="height: 300px; overflow: auto;">
                            <el-table
                            :data="tabData"
                            border
                            class="table"
                            ref="multipleTable"
                            header-cell-class-name="table-header"
                            highlight-current-row
                            @current-change="ruanwenChange"
                        >
                            <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
                            <el-table-column prop="articleTitle" label="软文标题" align="center"> </el-table-column>
                        </el-table>
                       </div>
                       </div>
                        <!-- 软文作者： <el-input v-model="ruanwenData.author"></el-input>
                        软文主题： <el-input v-model="ruanwenData.author"></el-input> 
                        所属栏目：      <br />
                        <el-select placeholder="请选择栏目">
                            <el-option label="在线会展" value="0" v-model="ruanwenData.author"></el-option>
                            <el-option label="企投家" value="3" v-model="ruanwenData.author"></el-option>
                        </el-select>          <br />                     
                        是否推荐：<br />
                        <el-select placeholder="请选择是否推荐">
                            <el-option label="是" value="0"></el-option>
                            <el-option label="否" value="1"></el-option> </el-select
                        ><br />
                        软文类型：<br />
                        <el-select placeholder="请选择软文类型">
                            <el-option label="软文详情" value="0"></el-option>
                            <el-option label="主题展" value="1"></el-option>
                            <el-option label="公司" value="2"></el-option>
                            <el-option label="产品" value="3"></el-option>
                        </el-select> -->
                    </el-form-item>
                    <!-- // 公司产品三级下拉框 -->
                    <el-form-item>
                        <el-select
                            @change="ExhibitChange"
                            v-model="form.exhibitId"
                            placeholder="请选择主题展"
                            v-if="form.advertType == 1 || form.advertType == 2 || form.advertType == 3"
                        >
                            <el-option
                                v-for="(item, index) in ExhibitList"
                                :key="index"
                                :label="item.exhibitName"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                        <br />
                        <br />
                        <el-select
                            @change="companyChange"
                            v-model="form.companyId"
                            placeholder="请选择公司"
                            v-if="form.advertType == 2 || form.advertType == 3"
                        >
                            <el-option
                                v-for="(item, index) in companyList"
                                :key="index"
                                :label="item.companyName"
                                :value="item.companyId"
                            ></el-option>
                        </el-select>
                        <br />
                        <br />
                        <el-select v-model="form.productBasicId" placeholder="请选择产品" v-if="form.advertType == 3">
                            <el-option
                                v-for="(item, index) in productBasicList"
                                :key="index"
                                :label="item.value"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>

                    <!-- // 图片和视频 -->
                    <el-form-item label="广告图片" v-if="form.advertType == 4">
                        <el-upload
                            class="avatar-uploader"
                            :action="$myUrl.BASEURL + 'system/resourceFileUpload'"
                            :show-file-list="false"
                            :on-success="advertResourceSuccess"
                            :data="advertResourceMark"
                        >
                            <img v-if="form.advertResource" :src="advertResourceUrl" class="avatar" />
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>

                    <el-form-item label="广告视频" v-if="form.advertType == 5">
                        <el-upload
                            class="avatar-uploader"
                            :action="$myUrl.BASEURL + 'system/resourceFileUpload'"
                            :show-file-list="false"
                            :on-success="advertResourceSuccess"
                            :data="advertResourceMark"
                        >
                            <video v-if="form.advertResource" :src="advertResourceUrl" controls class="avatar"></video>
                            <!-- <img v-if="form.advertResource" :src="advertResourceUrl" class="avatar" /> -->
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>

                    <!-- // 链接输入框 -->
                    <el-form-item label="广告链接" v-if="form.advertType == 6">
                        <el-input v-model="form.h5Link"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">表单提交</el-button>
                        <el-button @click="$router.push('/advertisement-list')">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import moment from 'moment';
import axios from 'axios';
import VueCropper from 'vue-cropperjs';
import seleSearch from '../common/sele-search';
export default {
    name: 'baseform',
    components: {
        VueCropper,
        seleSearch
    },

    data() {
        return {
            tabData: [],
            imgCode: '',
            // 公司列表
            companyList: [],
            //  主题展列表
            ExhibitList: [],
            productBasicList: [],
            imageUrl: '',
            placeholder: '请选取',
            nodatatext: '',
            count: 0,
            form: {
                adImg: '',
                qrImg: '',
                name: '',
                region: '',
                // 时间
                date1: '',
                date2: '',
                // 是否启用
                isEnable: '0',
                // 资源类型
                advertType: '0',
                //
                exhibitId: '',
                companyId: '',
                productBasicId: '',
                // 图片视频资源
                advertResource: '',
                // h5链接
                h5Link: '',
                delivery: true,
                type: ['步步高'],
                resource: '小天才',
                desc: '',
                options: []
            },
            ruanwenName: '',
            ruanwenList: '',
            defaultSrc: require('../../assets/img/img.jpg'),
            fileList: [],
            imgSrc: '',
            cropImg: '',
            dialogVisible: false,
            // 上传标识qrImgMark
            adImgMark: {
                fileGroup: 'advert',
                fileidentName: 'advertImg'
            },
            qrImgMark: {
                fileGroup: 'advert',
                fileidentName: 'qrCode'
            },
            advertResourceMark: {
                fileGroup: 'advert',
                fileidentName: 'advertResource'
            },
            adImgSrc: '',
            qrImgSrc: '',
            advertResourceUrl: ''
        };
    },
    created() {
        this.cropImg = this.defaultSrc;
        // this.getCompanyList();
        this.getExhibitList();
        // this.aaa();
        // this.$set(this.form,isEnable,1)
        if (this.$route.query.adId) {
            this.getAdData();
        }
    },
    methods: {
        // 软文搜索
        ruanwenSearch() {
            axios.get(this.$myUrl.BASEURL + 'article/getArticleBasic?keyword=' + this.ruanwenName).then((res) => {
                console.log(res);
                this.tabData = res.data.data;
            });
        },
        // table单选
        ruanwenChange(val) {
            console.log(val);
        },
        // 软文列表的搜索
        // aaa() {
        //     axios.get(this.$myUrl.BASEURL + 'article/getArticleList?pageNum=0&pageSize=0').then((res) => {
        //         console.log(res);
        //     });
        // },
        getAdData() {
            // console.log('---------触发广告详情---------');
            axios.get(this.$myUrl.BASEURL + 'advert/getAdvert?advertId=' + this.$route.query.adId).then((res) => {
                console.log('广告详情', res);
                let that = res.data.data;
                this.form.adImg = that.advertImg;
                this.adImgSrc = this.$myUrl.IMGURL + that.advertImg;
                this.form.qrImg = that.qrCode;
                this.qrImgSrc = this.$myUrl.IMGURL + that.qrCode;
                this.form.isEnable = that.advertEnableStatus;
                this.form.date1 = that.showStartDate;
                this.form.date2 = that.showEndDate;
                this.form.advertType = that.advertType;
            });
        },
        getExhibitList() {
            axios.get(this.$myUrl.BASEURL + 'exhibit/getExhibitList?pageNum=0&pageSize=0').then((res) => {
                console.log('会展列表', res);
                this.ExhibitList = res.data.data;
            });
        },
        // 主题展的点击
        ExhibitChange(e) {
            console.log(e);
            axios.get(this.$myUrl.BASEURL + 'exhibit/getExhibitCompanyListInfo?showCompanyType=0&exhibitId=' + e).then((res) => {
                console.log(res);
                this.companyList = res.data.data;
            });
        },
        companyChange(e) {
            console.log(e);
            axios.get(this.$myUrl.BASEURL + 'product/getProductBasicList?companyId=' + e).then((res) => {
                console.log('getProductBasicList', res);
                this.productBasicList = res.data.data;
            });
        },
        handleAvatarSuccess() {},
        beforeAvatarUpload() {},
        load() {
            // this.count += 2
        },
        onSubmit() {
            // alert(11)
            if (this.form.adImg == '') {
                this.$message.error('请上传广告图');
            } else if (this.form.qrImg == '') {
                this.$message.error('请上传广告二维码');
            } else if (this.form.isEnable == '') {
                this.$message.error('选择是否启用');
            } else if (this.form.date1 == '') {
                this.$message.error('请选择开始时间');
            } else if (this.form.date2 == '') {
                this.$message.error('请选择结束时间');
            } else if (this.form.advertType == '') {
                this.$message.error('请选择关联资源类型');
            } else {
                if (!this.$route.query.adId) {
                    axios
                        .post(this.$myUrl.BASEURL + 'advert/addAdvert', {
                            // id, //	int	广告Id
                            advertImg: this.form.adImg, //	String	广告图
                            qrCode: this.form.qrImg, //	String	广告二维码
                            advertEnableStatus: this.form.isEnable,
                            showStartDate: moment(this.form.date1).format('yyyy-MM-DD HH:mm:ss'),
                            // showEndDate, //	Date	显示结束日期
                            showEndDate: moment(this.form.date2).format('yyyy-MM-DD HH:mm:ss'),
                            //	关联资源类型
                            advertType: this.form.advertType, //	String	关联资源类型advertType
                            oneRelevantId: this.form.exhibitId, //	int	一级关联Id
                            twoRelevantId: this.form.companyId, //	int	二级关联Id
                            threeRelevantId: this.form.productBasicId, //	int	三级关联Id
                            advertResource: this.form.advertResource, //	String	广告资源
                            advertLink: this.form.h5Link //	String	广告链接
                            // periodValues, //	String	时段值(时段表对应值)
                            // remark, //	String	备注
                            // createTime //	Date	创建时间
                        })
                        .then((res) => {
                            console.log(res);
                            if (res.data.code == 200) {
                                this.$message.success('提交成功！');
                                this.$router.push('/advertisement-list');
                            } else {
                                this.$message.error(res.data.msg);
                            }
                        })
                        .catch((error) => {
                            this.$message.error('提交失败');
                        });
                } else {
                    axios
                        .put(this.$myUrl.BASEURL + 'advert/updateAdvert', {
                            id: this.$route.query.adId, //	int	广告Id
                            advertImg: this.form.adImg, //	String	广告图
                            qrCode: this.form.qrImg, //	String	广告二维码
                            advertEnableStatus: this.form.isEnable,
                            showStartDate: moment(this.form.date1).format('yyyy-MM-DD HH:mm:ss'),
                            // showEndDate, //	Date	显示结束日期
                            showEndDate: moment(this.form.date2).format('yyyy-MM-DD HH:mm:ss'),
                            //	关联资源类型
                            advertType: this.form.advertType, //	String	关联资源类型advertType
                            oneRelevantId: this.form.exhibitId, //	int	一级关联Id
                            twoRelevantId: this.form.companyId, //	int	二级关联Id
                            threeRelevantId: this.form.productBasicId, //	int	三级关联Id
                            advertResource: this.form.advertResource, //	String	广告资源
                            advertLink: this.form.h5Link //	String	广告链接
                            // oneRelevantId, //	int	一级关联Id
                            // twoRelevantId, //	int	二级关联Id
                            // threeRelevantId, //	int	三级关联Id
                            // advertResource, //	String	广告资源
                            // advertLink, //	String	广告链接
                            // periodValues, //	String	时段值(时段表对应值)
                            // remark, //	String	备注
                            // createTime //	Date	创建时间
                        })
                        .then((res) => {
                            console.log(res);
                            if (res.data.code == 200) {
                                this.$message.success('修改成功！');
                                this.$router.push('/advertisement-list');
                            } else {
                                this.$message.error(res.data.msg);
                            }
                        });
                }
            }
        },
        setImage(e) {
            console.log(e);
            const file = e.target.files[0];
            if (!file.type.includes('image/')) {
                return;
            }
            const reader = new FileReader();
            reader.onload = (event) => {
                this.dialogVisible = true;
                this.imgSrc = event.target.result;
                this.$refs.cropper && this.$refs.cropper.replace(event.target.result);
            };
            reader.readAsDataURL(file);
        },
        cropImage() {
            this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL();
        },
        cancelCrop() {
            this.dialogVisible = false;
            this.cropImg = this.defaultSrc;
        },
        imageuploaded(res) {
            //console.log(res);
        },
        handleError() {
            this.$notify.error({
                title: '上传失败',
                message: '图片上传接口上传失败，可更改为自己的服务器接口'
            });
        },

        // 文件上传所有方法
        adImgSuccess(res, file) {
            console.log(res);
            this.form.adImg = res.data.relativePath;
            this.adImgSrc = this.$myUrl.IMGURL + res.data.relativePath;
        },
        qrImgSuccess(res, file) {
            console.log(res);
            this.form.qrImg = res.data.relativePath;
            this.qrImgSrc = this.$myUrl.IMGURL + res.data.relativePath;
        },
        // 下面的图片和视频
        advertResourceSuccess(res, file) {
            console.log(res);
            this.form.advertResource = res.data.relativePath;
            this.advertResourceUrl = this.$myUrl.IMGURL + res.data.relativePath;
        },
        ImgUpload(file) {
            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isLt2M) {
                this.$message.error('上传图片大小不能超过 2MB!');
            }
            if (!isJPG) {
                this.$message.error('只能上传JPG/PNG 格式图片!');
            }
            return isJPG && isLt2M;
        }
    }
};
</script>
<style scoped>
.content-title {
    font-weight: 400;
    line-height: 50px;
    margin: 10px 0;
    font-size: 22px;
    color: #1f2f3d;
}
.pre-img {
    width: 100px;
    height: 100px;
    background: #f8f8f8;
    border: 1px solid #eee;
    border-radius: 5px;
}
.crop-demo {
    display: flex;
    align-items: flex-end;
}
.crop-demo-btn {
    position: relative;
    width: 100px;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    margin-left: 30px;
    background-color: #409eff;
    color: #fff;
    font-size: 14px;
    border-radius: 4px;
    box-sizing: border-box;
}
.crop-input {
    position: absolute;
    width: 100px;
    height: 40px;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 356px;
    height: 178px;
    display: block;
}
.el-table--border, .el-table--group {
    border: 1px solid #ccc;
}
</style>